import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Input } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import './index.scss'

class AddressSearch extends Component {

	static propTypes = {
		// 搜索地址
		value: PropTypes.string,
		placeholder: PropTypes.string,
		paddingBg: PropTypes.string,
		padding: PropTypes.string,

		inputBg: PropTypes.string,
		hasShadow: PropTypes.bool,
		id: PropTypes.string,
		onChange: PropTypes.func.isRequired,

	}

	static defaultProps = {
		paddingBg: '#FFF',
		padding: '8px 20px',
		inputBg: '#EEE',
		hasShadow: false,
		value: '',
		placeholder: '请输入关键词搜索'
	}

	render(){
		const { value, placeholder,onChange, paddingBg, inputBg, hasShadow, id, padding } = this.props
		return(
			<View
				className="address-search"
				style={{
					backgroundColor: 	paddingBg,
					padding: padding
				}}
			>
				<View
					className={`address-search-box ${hasShadow ? 'input-shadow' : ''}`}
					style={{
						backgroundColor: inputBg
					}}
				>
					<AtIcon value='search' size='13' color='#AEAAAA'></AtIcon>
					<Input
						className="address-search-input"
						value={value}
						onChange={(val) => onChange(val.detail.value)}
						placeholder={placeholder}
						id={id}
					></Input>
				</View>
			</View>
		)
	}
}

export default AddressSearch